<template>
  <main class="mainContainer">
    <div class="style">
      <div class="title">
        <van-text-ellipsis rows="2" :content="job.title" />
      </div>

      <van-row align="center">
        <van-col span="12">
          <div class="release_time">发布时间：{{ job.date }}</div>
        </van-col>
        <van-col span="8">
          <div class="num">浏览量{{ job.visits }}</div>
        </van-col>
      </van-row>

      <lazy-component>
        <div v-html="job.content" class="content"></div>
      </lazy-component>
    </div>
  </main>
</template>

<script setup>
import { onUnmounted, ref } from 'vue'

// 创建一个响应式数据 job，并从会话存储中获取并解析 "ConsultationDetails" 数据作为初始值
const job = ref(JSON.parse(sessionStorage.getItem('ConsultationDetails')))

// 在组件被卸载前执行的回调函数
onUnmounted(() => {
  // 移除会话存储中的 "ConsultationDetails" 数据
  sessionStorage.removeItem('ConsultationDetails')
})

</script>

<style lang="less" scoped>
@var1: #9f9fa0;

.style {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 2.5px;
	box-sizing: border-box;
	.title {
		font-weight: bold;
		font-size: 17px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
		margin-bottom: 0.5rem;
	}
	.content {
		overflow: hidden;
		padding: 0.7rem 0;
		text-indent: 2em;
		img {
			width: 100%;
		}
	}
}
.style :where(.num, .release_time) {
	color: @var1;
	font-size: 13.5px;
}

</style>
